<template>
  <view class="similarExamDialog">
    <u-popup
      :show="show"
      mode="bottom"
      :round="12"
      @close="close"
      :closeOnClickOverlay="true"
      :closeable="false"
      :safeAreaInsetBottom="true"
    >
      <view class="popCenter">
        <view class="row-center" style="height: 128rpx">
          <view class="title">相似试题</view>
          <image
            class="closeIcon"
            src="@/pagesA/static/images/chat/ai_close.png"
            @tap="close"
          ></image>
        </view>
        <view class="searchBg">
          <up-search
            placeholder="请输入试题题干"
            v-model="searchKeyword"
            :actionStyle="searchActionStyle"
            @search="search"
            @custom="search"
          ></up-search>
        </view>
        <kk-no-data class="noDataPage" v-if="showNoDataPage" />
        <scroll-view
          v-else
          class="content"
          scroll-y="true"
          enable-flex="true"
          scroll-with-animation="true"
          @scrolltolower="handlerScrolltolower"
        >
          <view v-for="(value, index) in list" :key="index">
            <ExamCard
              class="examCard"
              :data="value"
              :index="index"
              :isCanSelect="true"
              @examSelectAction="examSelectAction"
            />
          </view>
          <up-loadmore
            class="examCardLoadMore"
            v-if="loadMoreStatus === 'loading'"
            status="loading"
            :loading-text="contentText.contentrefresh"
          />
          <view class="examCardNoMore" v-if="loadMoreStatus === 'no-more'">
            {{ contentText.contentnomore }}
          </view>
        </scroll-view>
        <kkLoading v-if="showLoading" />
        <view class="bottom">
          <view class="bottom-select"
            >已选：{{ currentSelectExamList().length }}</view
          >
          <view class="bottom-btn" @tap="confirmPushExam">确定推送</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ExamCard from "./examCard.vue";
import kkToast from "@/utils/kkToast";
import kkLoading from "@/components/common/KKContainer/loading.vue";

import { extractedAudio } from "@/utils/audio";

import * as KKAswerApi from "@/api/answer";

defineProps({
  show: {
    type: Boolean,
    default: true,
  },
});

const showNoDataPage = ref(false);
const showLoading = ref(false);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loadAllData = ref(false);
const contentText = ref({
  contentrefresh: "拼命加载中～",
  contentnomore: "我们也是有底线的噢～",
});
const loadMoreStatus = ref(""); // loading: 加载中 no-more: 没有更多加载完成
const requesting = ref(false);

const searchKeyword = ref("");

const searchActionStyle = ref({
  width: "104rpx",
  height: "56rpx",
  background: "#126EFE",
  borderRadius: "10rpx",
  fontWeight: "500",
  fontSize: "28rpx",
  color: "#FFFFFF",
  lineHeight: "56rpx",
  textAlign: "center",
  marginRight: "8rpx",
});

const search = () => {
  page.value = 1;
  loadAllData.value = false;
  examSimilarSearch(searchKeyword.value);
};

const list = ref([]);
const isSimilarExam = ref(false);

const initSimilarList = (similarList: any[]) => {
  list.value = similarList || [];
  list.value = extractedAudio(list.value);
  if (list.value.length > 0) {
    isSimilarExam.value = true;
  }
  if (similarList.length === 0) {
    showNoDataPage.value = true;
  }
};

const examSimilarSearch = async (content: string) => {
  isSimilarExam.value = false;
  if (requesting.value) return;
  const param = {
    page: page.value,
    pageSize: pageSize.value,
    stem: content,
    productId: "1",
  };
  requesting.value = true;
  showLoading.value = true;
  const data = (await KKAswerApi.getStemSearchProt(param).catch((e) => {
    requesting.value = false;
    loadMoreStatus.value = "";
    showNoDataPage.value = true;
  })) as any;
  showLoading.value = false;
  requesting.value = false;
  if (data && Number(data.code) === 10000) {
    total.value = data.data && data.data.totalCount;
    data.data.list.forEach((item) => {
      item.isSelected = false;
    });
    if (page.value === 1) {
      list.value = (data.data && data.data.list) || [];
    } else {
      list.value = list.value.concat((data.data && data.data.list) || []);
    }
    list.value = extractedAudio(list.value);
    if (list.value.length >= total.value) {
      loadAllData.value = true;
      loadMoreStatus.value = "no-more";
    } else {
      loadMoreStatus.value = "";
    }
    if (list.value.length > 0) {
      showNoDataPage.value = false;
    } else {
      showNoDataPage.value = true;
    }
  } else {
    showNoDataPage.value = true;
  }
};

// 滚动到页面底部
const handlerScrolltolower = () => {
  if (loadAllData.value || isSimilarExam.value) return;
  page.value += 1;
  loadMoreStatus.value = "loading";
  examSimilarSearch(searchKeyword.value);
};

const examSelectAction = (index: number) => {
  if (!list.value[index].isSelected && currentSelectExamList().length === 3) {
    kkToast.showToast("单次最多可推送3道题");
    return;
  }
  if (index < list.value.length) {
    list.value[index].isSelected = !list.value[index].isSelected;
  }
};

const currentSelectExamList = () => {
  const selectList: any = [];
  list.value.forEach((item) => {
    if (item.isSelected) {
      selectList.push(item.id);
    }
  });
  return selectList;
};

const confirmPushExam = () => {
  if (currentSelectExamList().length === 0) {
    kkToast.showToast("请选择要推送的试题");
    return;
  }
  emit("confirmPushExam", currentSelectExamList());
};

// 按钮关闭
const close = () => {
  showNoDataPage.value = false;
  showLoading.value = false;
  page.value = 1;
  total.value = 0;
  loadAllData.value = false;
  loadMoreStatus.value = "";
  requesting.value = false;
  searchKeyword.value = "";
  list.value = [];
  emit("close");
};

const cancel = () => {
  emit("cancel");
};

const emit = defineEmits(["close", "confirmPushExam", "cancel"]);
defineExpose({ initSimilarList });
</script>

<style lang="scss" scoped>
.similarExamDialog {
  width: calc(100vw);
  position: relative;
  .searchBg {
    margin-left: 24rpx;
    margin-right: 24rpx;
    width: calc(100vw - 48rpx);
    height: 72rpx;
    background: #f2f3f5;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
  }
  .popCenter {
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    border-radius: 6px;
    width: calc(100vw);

    .title {
      margin-left: auto;
      margin-right: auto;
      padding-left: 24rpx;
      height: 128rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #111111;
      line-height: 124rpx;
    }
    .closeIcon {
      position: absolute;
      right: 24rpx;
      width: 44rpx;
      height: 44rpx;
    }
    .content {
      margin-left: 24rpx;
      margin-right: 24rpx;
      width: calc(100% - 48rpx);
      max-height: calc(58vh);
      min-height: calc(58vh);
      border-radius: 12rpx;
      .examCard {
        margin-bottom: 24rpx;
      }
      .examCardLoadMore {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
      }
      .examCardNoMore {
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        height: 33rpx;
        font-size: 24rpx;
        color: #999999;
        line-height: 33rpx;
        text-align: center;
      }
    }
    .noDataPage {
      max-height: calc(58vh);
      min-height: calc(58vh);
      height: calc(58vh);
    }
    .bottom {
      height: 112rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      &-select {
        margin-left: 24rpx;
        font-size: 32rpx;
        color: #126efe;
        line-height: 48rpx;
        margin-right: auto;
      }
      &-btn {
        width: 341rpx;
        height: 88rpx;
        margin-right: 24rpx;
        background: #126efe;
        border-radius: 16rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 88rpx;
        text-align: center;
      }
    }
    .examSearching {
      position: absolute;
      width: 100vw;
      height: calc(100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99;
      &-icon {
        width: 64rpx;
        height: 64rpx;
      }
      &-text {
        padding-top: 20rpx;
        margin-left: 2rpx;
        font-size: 28rpx;
        color: #999999;
        line-height: 34rpx;
        font-weight: 400;
        text-align: center;
      }
    }
  }
}
</style>
